<template>
  <div>
    <alert v-model="show" title="提示" @on-show="onShow" @on-hide="onHide">{{message}}</alert>
    <Yq-header :needBack="needBack" :needLeft="needLeft" :needRight="needRight" :rightCallback="rightCallback" slot="header" v-if="isShowHeader" ref="header">
      <p slot="content">{{title}}</p>
      <p slot="rightContent" v-if="needRight">{{rightContent}}</p>
      <p slot="leftContent" v-if="needLeft">{{leftContent}}</p>
    </Yq-header>
    <div style="width: 100%;height: 38px;"><span>&nbsp;</span></div>
    <!--用户无生日提醒时显示-->
    <flexbox v-if="hasBirthday!==true">
      <flexbox-item>
        <div class="flex-demo">
          <p style="line-height: 74px;text-align: center;border: solid 1px gainsboro;border-radius: 6px;width: 90%;margin: 0 auto;background: #fff;font-size: 16px;color: #636363;" @click="addBirthday">
            +新增关系
          </p>
        </div>
      </flexbox-item>
    </flexbox>
    <!--用户有生日提醒时显示-->
    <flexbox orient="vertical" v-if="hasBirthday===true" style="margin-top: 15px;">
      <flexbox-item v-for="relationship in relationship">
        <div class="flex-demo" style="border: solid 1px gainsboro;border-radius: 6px;width: 90%;margin: 0 auto;background: #fff;">
          <p style="width:95%;margin:0 auto;border-bottom: solid 1px gainsboro;line-height: 30px;color: #636363;"><span style="font-size: 16px;padding: 0 30px 0 0;display: inline-block;width: 80px;text-align: right;color: #aaa;">关系类型</span>{{relationship.relation}}</p>
          <p style="width:95%;margin:0 auto;border-bottom: solid 1px gainsboro;line-height: 30px;color: #636363;"><span style="font-size: 16px;padding: 0 30px 0 0;display: inline-block;width: 80px;text-align: right;color: #aaa;">姓名</span>{{relationship.name}}</p>
          <p style="width:95%;margin:0 auto;border-bottom: solid 1px gainsboro;line-height: 30px;color: #636363;"><span style="font-size: 16px;padding: 0 30px 0 0;display: inline-block;width: 80px;text-align: right;color: #aaa;">生日</span>{{relationship.birthday}}</p>
          <div style="text-align: right;padding-top: 5px;">
            <img slot="icon" width="17" height="17" style="margin-right:15px;" src="../../../assets/images/user/bianji.png" @click="birthdayDetailFn(relationship.id)">
            <img slot="icon" width="17" height="17" style="margin-right:10px;" src="../../../assets/images/user/del.png" @click="birthdayDelFn(relationship.id)">
          </div>
        </div>
      </flexbox-item>
    </flexbox>
  </div>
</template>

<script>
  import { Group, Cell, Tab, TabItem, Swiper, SwiperItem, Flexbox, FlexboxItem, XButton, XInput, Alert, Icon } from 'vux'
//  import * as types from '../../../store/types'
  import * as urls from '../../../api/urls'
  import YqHeader from '../../../components/YqHeader.vue'

  export default {
    components: {
      Group,
      Cell,
      Tab,
      TabItem,
      Swiper,
      SwiperItem,
      Flexbox,
      FlexboxItem,
      XButton,
      XInput,
      Alert,
      Icon,
      YqHeader
    },
    data () {
      return {
        isShowTabbar: false,
        isShowHeader: true,
        title: '生日提醒',
        rightContent: '新增',
        needBack: true,
        needRight: true,
        needLeft: false,
        leftContent: '',
        show: false,
        message: '',
        hasBirthday: true,
        relationship: []
      }
    },
    methods: {
      onHide () {
        if (this.message === '删除成功') {
          this.getMentionList()
        }
      },
      onShow () {
        console.log('on show')
      },
      rightCallback () {
        this.$router.push({
          path: '/birthday/AddBirthday'
        })
        this.$router.go(1)
      },
      addBirthday () {
        this.$router.push({
          path: '/birthday/AddBirthday'
        })
        this.$router.go(1)
      },
      birthdayDetailFn (typeId) {
        this.$router.push({
          path: '/birthday/AddBirthday',
          query: {
            typeId: typeId
          }
        })
        this.$router.go(1)
      },
      birthdayDelFn (typeId) {
        let that = this
        that.$vux.confirm.show({
          title: '提示',
          content: '确定删除该关系吗？',
          confirmText: '确定',
          onConfirm () {
            that.birthdayDelete(typeId)
          }
        })
      },
      birthdayDelete (typeId) {
        let userId = this.$store.state.userInfo.id
        let that = this
        that.http(urls.deleteMention, {userId: userId, id: typeId}, function (res) {
          if (res.status === 100) {
            that.show = true
            that.message = '删除成功'
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = '服务器错误，请稍后重试'
        })
      },
      getMentionList () {
        let userId = this.$store.state.userInfo.id
        let that = this
        that.http(urls.mentionList, {userId: userId}, function (res) {
          if (res.status === 100) {
            if (res.data.list.length === 0) {
              that.hasBirthday = false
              that.needRight = false
            } else {
              that.hasBirthday = true
            }
            that.relationship = []
            res.data.list.forEach(function (item) {
              let list = {
                name: item.name,
                id: item.id,
                relation: item.relation,
                birthday: (item.birthday).substr(0, 10)
              }
              that.relationship.push(list)
            })
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = '服务器错误，请稍后重试'
        })
      },
      weixinfn7 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted: function () {
      this.getMentionList()
      this.weixinfn7()
    }
  }
</script>

<style scoped="scoped">
  .flex-demo {
    /*text-align: center;*/
    /*color: #fff;*/
    /*background-color: #20b907;*/
    border-radius: 4px;
    background-clip: padding-box;
    margin-top: 8px;
  }
</style>
